<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.63">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <link rel="apple-touch-icon" href="/preview/dev-edge/static/images/icons/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/preview/dev-edge/static/images/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/preview/dev-edge/static/images/icons/favicon-32x32.png"><link rel="mask-icon" color="#5bbad5" href="/preview/dev-edge/static/images/icons/safari-pinned-tab.svg"><link rel="manifest" href="/preview/dev-edge/manifest.webmanifest"><meta name="theme-color" content="#3eaf7c"><title>前端开发规范 | 编程宝典</title><meta name="description" content="技术文档系列">
    <link rel="preload" href="/preview/dev-edge/assets/style-f70c0240.css" as="style"><link rel="stylesheet" href="/preview/dev-edge/assets/style-f70c0240.css">
    <link rel="modulepreload" href="/preview/dev-edge/assets/app-5517e208.js"><link rel="modulepreload" href="/preview/dev-edge/assets/standard.html-a01ab960.js"><link rel="modulepreload" href="/preview/dev-edge/assets/standard.html-1078c00a.js"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-b0802b3f.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-91808b4b.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/companyWebSite.html-9e7a30c8.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-4262c6b6.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-6497e968.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-2b3ce734.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-c1d52a82.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-193e0fce.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-8ef690da.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-6ead1acd.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-e16c539b.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-2612aedd.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/element.html-433d6fa7.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/others.html-0fd00d80.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-d5a68135.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-f9d64ee4.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/note.html-c888e7ae.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/chapter01.html-9437ac94.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/3Dweb.html-a089b8c2.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/efficientOffice.html-738b652c.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/jsBase.html-57994080.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/shareDays.html-3bf22bb6.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-f50cfc3a.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-d5c469ee.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/404.html-1f2dab39.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-5eb236d0.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-1a6bf188.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/companyWebSite.html-cf3c257a.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-0825c4b1.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-60fc4bf3.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-ade72257.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-6916a41b.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-7604bfc1.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-b898dcab.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-5dc09f61.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-27bb8266.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-d7c5567b.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/element.html-67b8ba8a.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/others.html-243c60b2.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-38035162.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-301c45fe.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/note.html-a409283d.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/chapter01.html-a87c4022.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/3Dweb.html-ce93ff55.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/efficientOffice.html-eb2a5cdf.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/jsBase.html-598d0a7a.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/shareDays.html-44350d8b.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-58ddc7ce.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index.html-a8b21767.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/404.html-2796e91e.js" as="script"><link rel="prefetch" href="/preview/dev-edge/assets/index-e32a7948.js" as="script">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/preview/dev-edge/" class=""><img class="logo" src="/preview/dev-edge/static/images/icons/android-chrome-192x192.png" alt="编程宝典"><span class="site-name can-hide">编程宝典</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="前端"><span class="title">前端</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="前端"><span class="title">前端</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>基础知识</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/html/" class="" aria-label="html"><!--[--><!--]--> html <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/css/" class="" aria-label="css"><!--[--><!--]--> css <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/javascript/" class="" aria-label="Javascript"><!--[--><!--]--> Javascript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>高级进阶</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/vue/" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>插件及组件库</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/libs/" class="" aria-label="导航"><!--[--><!--]--> 导航 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>综合</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/others/standard" class="router-link-active" aria-label="前端开发规范"><!--[--><!--]--> 前端开发规范 <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/others/note" class="" aria-label="前端知识点"><!--[--><!--]--> 前端知识点 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="后端"><span class="title">后端</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="后端"><span class="title">后端</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/preview/dev-edge/backend/java/" class="" aria-label="java"><!--[--><!--]--> java <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/preview/dev-edge/backend/python/" class="" aria-label="python"><!--[--><!--]--> python <!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a href="/preview/dev-edge/storage/" class="" aria-label="版本库"><!--[--><!--]--> 版本库 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/preview/dev-edge/manage/" class="" aria-label="管理"><!--[--><!--]--> 管理 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/preview/dev-edge/project/" class="" aria-label="项目"><!--[--><!--]--> 项目 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/preview/dev-edge/system/" class="" aria-label="系统"><!--[--><!--]--> 系统 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/preview/dev-edge/share/" class="" aria-label="分享"><!--[--><!--]--> 分享 <!--[--><!--]--></a></div><div class="navbar-item"><a class="external-link" href="https://gitee.com/chengmaofeng/dev-edge" rel="noopener noreferrer" target="_blank" aria-label="Gitee"><!--[--><!--]--> Gitee <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="前端"><span class="title">前端</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="前端"><span class="title">前端</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>基础知识</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/html/" class="" aria-label="html"><!--[--><!--]--> html <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/css/" class="" aria-label="css"><!--[--><!--]--> css <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/javascript/" class="" aria-label="Javascript"><!--[--><!--]--> Javascript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>高级进阶</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/vue/" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>插件及组件库</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/libs/" class="" aria-label="导航"><!--[--><!--]--> 导航 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>综合</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/others/standard" class="router-link-active" aria-label="前端开发规范"><!--[--><!--]--> 前端开发规范 <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/preview/dev-edge/frontend/others/note" class="" aria-label="前端知识点"><!--[--><!--]--> 前端知识点 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="后端"><span class="title">后端</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="后端"><span class="title">后端</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/preview/dev-edge/backend/java/" class="" aria-label="java"><!--[--><!--]--> java <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/preview/dev-edge/backend/python/" class="" aria-label="python"><!--[--><!--]--> python <!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a href="/preview/dev-edge/storage/" class="" aria-label="版本库"><!--[--><!--]--> 版本库 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/preview/dev-edge/manage/" class="" aria-label="管理"><!--[--><!--]--> 管理 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/preview/dev-edge/project/" class="" aria-label="项目"><!--[--><!--]--> 项目 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/preview/dev-edge/system/" class="" aria-label="系统"><!--[--><!--]--> 系统 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/preview/dev-edge/share/" class="" aria-label="分享"><!--[--><!--]--> 分享 <!--[--><!--]--></a></div><div class="navbar-item"><a class="external-link" href="https://gitee.com/chengmaofeng/dev-edge" rel="noopener noreferrer" target="_blank" aria-label="Gitee"><!--[--><!--]--> Gitee <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">基础知识 <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/preview/dev-edge/frontend/html/" class="sidebar-item" aria-label="HTML基础知识"><!--[--><!--]--> HTML基础知识 <!--[--><!--]--></a><!----></li><li><a href="/preview/dev-edge/frontend/css/" class="sidebar-item" aria-label="CSS知识点"><!--[--><!--]--> CSS知识点 <!--[--><!--]--></a><!----></li><li><a href="/preview/dev-edge/frontend/javascript/" class="sidebar-item" aria-label="Javascript"><!--[--><!--]--> Javascript <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">高级进阶 <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/preview/dev-edge/frontend/vue/" class="sidebar-item" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">插件及组件库 <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/preview/dev-edge/frontend/libs/" class="sidebar-item" aria-label="插件及组件库"><!--[--><!--]--> 插件及组件库 <!--[--><!--]--></a><!----></li><li><a href="/preview/dev-edge/frontend/libs/element.html" class="sidebar-item" aria-label="element UI 快捷代码片段记录"><!--[--><!--]--> element UI 快捷代码片段记录 <!--[--><!--]--></a><!----></li><li><a href="/preview/dev-edge/frontend/libs/others.html" class="sidebar-item" aria-label="其他"><!--[--><!--]--> 其他 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active collapsible">综合 <span class="down arrow"></span></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="前端开发规范"><!--[--><!--]--> 前端开发规范 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#命名规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="命名规范"><!--[--><!--]--> 命名规范 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#注释规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="注释规范"><!--[--><!--]--> 注释规范 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#html规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="HTML规范"><!--[--><!--]--> HTML规范 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#css规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="CSS规范"><!--[--><!--]--> CSS规范 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#css命名规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="CSS命名规范"><!--[--><!--]--> CSS命名规范 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#css选择器规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="CSS选择器规范"><!--[--><!--]--> CSS选择器规范 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#javascript规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="Javascript规范"><!--[--><!--]--> Javascript规范 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#javascript规范约定" class="router-link-active router-link-exact-active sidebar-item" aria-label="Javascript规范约定"><!--[--><!--]--> Javascript规范约定 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#vue项目规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="Vue项目规范"><!--[--><!--]--> Vue项目规范 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#vue-编码基础" class="router-link-active router-link-exact-active sidebar-item" aria-label="Vue 编码基础"><!--[--><!--]--> Vue 编码基础 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#vue-方法命名" class="router-link-active router-link-exact-active sidebar-item" aria-label="vue 方法命名"><!--[--><!--]--> vue 方法命名 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/preview/dev-edge/frontend/others/standard.html#vue-项目目录规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="Vue 项目目录规范"><!--[--><!--]--> Vue 项目目录规范 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/preview/dev-edge/frontend/others/note.html" class="sidebar-item" aria-label="前端知识点"><!--[--><!--]--> 前端知识点 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="前端开发规范" tabindex="-1"><a class="header-anchor" href="#前端开发规范" aria-hidden="true">#</a> 前端开发规范</h1><h2 id="命名规范" tabindex="-1"><a class="header-anchor" href="#命名规范" aria-hidden="true">#</a> 命名规范</h2><p>class、id 都需小写</p><ol><li>命名使用英文，禁止使用特殊符号</li></ol><ol start="3"><li>样式不能包含ad、guanggao、ads、gg是广告的含义的关键词，避免元素被网页拓展、插件屏蔽</li><li>名称间隔使用 – 符号</li></ol><p>正例：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>mall-management-system
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>反例：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>mall_management-system
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>或</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>mallManagementSystem
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="注释规范" tabindex="-1"><a class="header-anchor" href="#注释规范" aria-hidden="true">#</a> 注释规范</h2><ol><li>模块注释: 有开始和结束注释，模块之间相隔一行</li></ol><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token comment">&lt;!-- 模块 A 开始 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mod_a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 模块 A 结束 --&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="2"><li>函数注释：注明函数的调用方式，函数的用途，参数类型及示例</li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token doc-comment comment">/**
* 函数名及用途
* 参数类型
* 调用示例
*/</span>
<span class="token keyword">function</span> <span class="token function">fnc</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	…
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>代码块注释：注明函数用途</li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 保存fnc函数返回结果</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token function">fnc</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="html规范" tabindex="-1"><a class="header-anchor" href="#html规范" aria-hidden="true">#</a> HTML规范</h2><ol><li>标签必须合法且闭合、嵌套正确，标签名需小写</li><li>HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签。</li></ol><p>正例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>footer</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="css规范" tabindex="-1"><a class="header-anchor" href="#css规范" aria-hidden="true">#</a> CSS规范</h2><h3 id="css命名规范" tabindex="-1"><a class="header-anchor" href="#css命名规范" aria-hidden="true">#</a> CSS命名规范</h3><ol><li>类名使用小写字母，以中划线分隔</li><li>id 采用驼峰式命名</li><li>ID 和 class 的名称总是使用可以反应元素目的和用途的名称css</li></ol><p>正例：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.heavy</span> <span class="token punctuation">{</span>
 <span class="token property">font-weight</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.important</span> <span class="token punctuation">{</span>
 <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.fw-800</span> <span class="token punctuation">{</span>
 <span class="token property">font-weight</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.red</span> <span class="token punctuation">{</span>
 <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="css选择器规范" tabindex="-1"><a class="header-anchor" href="#css选择器规范" aria-hidden="true">#</a> CSS选择器规范</h3><p>1)禁止使用层级过深的选择器，最多3级。 2)除非样式重置需要，禁止对纯元素选择器设置特定样式，避免样式污染</p><p>反例：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.without-animation .book-body .body-inner .book-header .dropdown</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token selector">.without-animation .book-body .body-inner .book-header .dropdown .pull-left</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>3)省略 0 后面的单位</p><p>正例：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
 <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
 <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
 <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
 <span class="token property">margin</span><span class="token punctuation">:</span> 0em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>4)避免使用 ID 选择器及全局标签选择器防止污染全局样式 正例：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.header</span> <span class="token punctuation">{</span>
 <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
 <span class="token property">margin</span><span class="token punctuation">:</span> 0em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">#header</span> <span class="token punctuation">{</span>
<span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
 <span class="token property">margin</span><span class="token punctuation">:</span> 0em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="javascript规范" tabindex="-1"><a class="header-anchor" href="#javascript规范" aria-hidden="true">#</a> Javascript规范</h2><h3 id="javascript规范约定" tabindex="-1"><a class="header-anchor" href="#javascript规范约定" aria-hidden="true">#</a> Javascript规范约定</h3><p>1)采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束 反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>_name <span class="token operator">/</span> name_ <span class="token operator">/</span> name$
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>2)方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风 格，必须遵从驼峰形式 正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>localValue <span class="token operator">/</span> <span class="token function">getHttpMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">/</span> inputUserId
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>3)常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚， 不要嫌名字长 正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token constant">MAX_STOCK_COUNT</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>max_count
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>4)声明字符串，统一用单引号 ’ 正例:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&#39;foo&#39;</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>反例:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> str <span class="token operator">=</span> “foo”<span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>5)开发完毕功能，尽量注释掉console.log，因为大量使用会有性能问题。</p><h2 id="vue项目规范" tabindex="-1"><a class="header-anchor" href="#vue项目规范" aria-hidden="true">#</a> Vue项目规范</h2><h3 id="vue-编码基础" tabindex="-1"><a class="header-anchor" href="#vue-编码基础" aria-hidden="true">#</a> Vue 编码基础</h3><p>vue 项目规范以 Vue 官方规范 （https://cn.vuejs.org/v2/style-guide/） 中的 A 规范为基础，在 其上面进行项目开发，故所有代码均遵守该规范。 请仔仔细细阅读 Vue 官方规范，切记，此为第一步。</p><h4 id="项目名称" tabindex="-1"><a class="header-anchor" href="#项目名称" aria-hidden="true">#</a> 项目名称</h4><p>项目名称命名规范建议采用“项目英文名称+项目用途类型”命名，例如：“医药后台管理系统”可命名为：。 正例：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>medicine-admin
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>反例：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>medicineAdmin
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="public文件夹" tabindex="-1"><a class="header-anchor" href="#public文件夹" aria-hidden="true">#</a> public文件夹</h4><p>Public文件主要存放无需打包的静态资源：</p><p>比如favicon.ico(浏览器顶部显示的图标)、index.html等，也可以添加static文件夹，存放配置config文件（可配置更改切换项目打包后的域名设置）、第三方插件等。</p><h4 id="src文件" tabindex="-1"><a class="header-anchor" href="#src文件" aria-hidden="true">#</a> src文件</h4><h5 id="api文件夹" tabindex="-1"><a class="header-anchor" href="#api文件夹" aria-hidden="true">#</a> api文件夹</h5><p>（1）主要存放api接口请求，以按照业务划分，一个功能一个js文件，比如：user（用户管理） 对于 api 中的每个方法要添加注释，注释与后端 swagger接口文档保持语义一致。</p><p>正例：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>user.js  // 用户管理
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>在api文件目录下新建user.js文件 user.js文件里存放相关user接口请求URL以及请求类型</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">&#39;@/utils/request&#39;</span>
<span class="token comment">// 获取用户列表</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getUserList</span> <span class="token operator">=</span> <span class="token parameter">params</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;/user/list&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;get&quot;</span><span class="token punctuation">,</span>
    params
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 添加用户</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">addUser</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;/user/add&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;post&quot;</span><span class="token punctuation">,</span>
    data
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h5 id="assets文件夹" tabindex="-1"><a class="header-anchor" href="#assets文件夹" aria-hidden="true">#</a> assets文件夹</h5><p>用于存放静态资源，与public不同，该目录会经过打包更名，目录一般存放文件夹images图片文件，静态资源命名格式为 kebab-case</p><p>正例： 命名建议“模块英文+图片用途语义英文“组合命名</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>login-bg.png
icon-pelope.png
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h5 id="components文件夹" tabindex="-1"><a class="header-anchor" href="#components文件夹" aria-hidden="true">#</a> components文件夹</h5><ol><li>组件名命名规范 组件名命名建议“模块名称英文+组件用途英文”组合方式命名，建议多个单词组成（大于等于 2）， 且命名规范为 kebab-case 格式。这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。</li></ol><p>正例： Svg字体图标组件</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>svg-icon.vue
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>反例：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>svgIcon.vue
SVGIcon.vue

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>组件内的js，name命名建议“模块名称英文+组件用途英文”组合方式命名，建议以大驼峰格式命名。</p><p>正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39; SvgIcon&#39;</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> Svgicon<span class="token punctuation">,</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> &#39; svg<span class="token operator">-</span>icon<span class="token punctuation">,</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="2"><li>基础组件文件名为 base 开头，使用完整单词而不是缩写</li></ol><p>正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>base<span class="token operator">-</span>button<span class="token punctuation">.</span>vue
base<span class="token operator">-</span>table<span class="token punctuation">.</span>vue
base<span class="token operator">-</span>icon<span class="token punctuation">.</span>vue
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>MyButton<span class="token punctuation">.</span>vue
VueTable<span class="token punctuation">.</span>vue
IIcon<span class="token punctuation">.</span>vue
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>和父组件紧密耦合的子组件应该以父组件名作为前缀命名</li></ol><p>正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>todo<span class="token operator">-</span>list<span class="token punctuation">.</span>vue
todo<span class="token operator">-</span>list<span class="token operator">-</span>item<span class="token punctuation">.</span>vue
todo<span class="token operator">-</span>list<span class="token operator">-</span>item<span class="token operator">-</span>button<span class="token punctuation">.</span>vue
user<span class="token operator">-</span>profile<span class="token operator">-</span>options<span class="token punctuation">.</span>vue （完整单词）
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>TodoList<span class="token punctuation">.</span>vue
TodoItem<span class="token punctuation">.</span>vue
TodoButton<span class="token punctuation">.</span>vue
UProfOpts<span class="token punctuation">.</span>vue （使用了缩写）
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="4"><li>在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用 自闭合组件</li></ol><p>正例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token comment">&lt;!-- 在单文件组件、字符串模板和 JSX 中 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyComponent</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">:column</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>my<span class="token operator">-</span>component <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>row<span class="token operator">&gt;</span><span class="token operator">&lt;</span>table <span class="token operator">:</span>column<span class="token operator">=</span><span class="token string">&quot;data&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>row<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><ol start="5"><li>组件的 data 必须是一个函数 当在组件中使用 data 属性的时候（除了 new Vue 外的任何地方），它的值必须是返回一个对象的函数。 因为如果直接是一个对象的话，子组件之间的属性值会互相影响。</li></ol><p>正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;jack&#39;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;jack&#39;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="6"><li>Prop 定义应该尽量详细</li></ol><ul><li>必须使用 camelCase 驼峰命名</li><li>必须指定类型</li><li>必须加上注释，表明其含义</li><li>必须加上 required 或者 default，两者二选其一</li><li>如果有业务需要，必须加上 validator 验证</li></ul><p>正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token comment">// 组件状态，用于控制组件的颜色</span>
  <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span>
    <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token function-variable function">validator</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">[</span> <span class="token string">&#39;succ&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;info&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;error&#39;</span> <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 用户级别，用于显示皇冠个数</span>
  userLevel：<span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span>
    <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="7"><li>为组件样式设置作用域</li></ol><p>正例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn btn-close<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>X<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 使用 `scoped` 特性 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.btn-close</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn btn-close<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>X<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 没有使用 `scoped` 特性 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.btn-close</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="8"><li>如果特性元素较多，应该主动换行</li></ol><p>正例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyComponent</span> <span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">/&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyComponent</span> <span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="config文件夹" tabindex="-1"><a class="header-anchor" href="#config文件夹" aria-hidden="true">#</a> config文件夹</h5><p>配置文件</p><h5 id="icons文件夹" tabindex="-1"><a class="header-anchor" href="#icons文件夹" aria-hidden="true">#</a> icons文件夹</h5><p>图标文件</p><h5 id="lang文件夹" tabindex="-1"><a class="header-anchor" href="#lang文件夹" aria-hidden="true">#</a> lang文件夹</h5><p>国际化文件</p><h5 id="layout文件夹" tabindex="-1"><a class="header-anchor" href="#layout文件夹" aria-hidden="true">#</a> layout文件夹</h5><p>布局文件</p><h5 id="router文件夹" tabindex="-1"><a class="header-anchor" href="#router文件夹" aria-hidden="true">#</a> router文件夹</h5><p>路由文件</p><h5 id="styles文件夹" tabindex="-1"><a class="header-anchor" href="#styles文件夹" aria-hidden="true">#</a> styles文件夹</h5><p>全局样式</p><h5 id="utils文件夹" tabindex="-1"><a class="header-anchor" href="#utils文件夹" aria-hidden="true">#</a> utils文件夹</h5><p>工具类js</p><h5 id="views文件夹" tabindex="-1"><a class="header-anchor" href="#views文件夹" aria-hidden="true">#</a> views文件夹</h5><p>1、views 下面的文件夹代表着模块的名字</p><p>文件夹建议由模块名称英文命名，尽量取名词命名，单词最好只能有一个，以小写开头</p><p>正例:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>user
order
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>greet
userInfo;
User;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>2、views 下的 vue 文件命名</p><ol><li>views 下面的 vue 文件代表着页面的名字，放在模块文件夹之下；命名规范建议最好尽量为名词命名；</li><li>名字至少两个单词，大写驼峰格式命名，开头的单词就是所属模块名字+结尾单词；</li><li>常用结尾单词有（Detail、Edit、List、Info、Report）。</li></ol><p>正例：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>UserDetai
UserEdit
UserList
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Detai
Edit
List
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vue-方法命名" tabindex="-1"><a class="header-anchor" href="#vue-方法命名" aria-hidden="true">#</a> vue 方法命名</h3><p>对于单文件组件，每个文件中 template/script/style 标签的顺序保持一致，且把style标签放在最后。</p><h4 id="vue-方法放置顺序" tabindex="-1"><a class="header-anchor" href="#vue-方法放置顺序" aria-hidden="true">#</a> vue 方法放置顺序</h4><ul><li>components</li><li>props</li><li>data</li><li>created</li><li>mounted</li><li>activited</li><li>update</li><li>beforeRouteUpdate</li><li>metods</li><li>filter</li><li>computed</li><li>watch</li></ul><h4 id="method-自定义方法命名" tabindex="-1"><a class="header-anchor" href="#method-自定义方法命名" aria-hidden="true">#</a> method 自定义方法命名</h4><ul><li>动宾短语（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）</li><li>ajax 方法以 get、post 开头，以 data 结尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）</li><li>事件方法以 on 开头（onTypeChange、onUsernameInput）</li><li>init、refresh 单词除外</li><li>尽量使用常用单词开头（set、get、open、close、jump）</li><li>驼峰命名（good: getListData）（bad: get_list_data、getlistData）</li></ul><h4 id="生命周期方法注意点" tabindex="-1"><a class="header-anchor" href="#生命周期方法注意点" aria-hidden="true">#</a> 生命周期方法注意点</h4><ul><li>不在 mounted、created 之类的方法写逻辑，取 ajax 数据，</li><li>在 created 里面监听 Bus 事件</li></ul><h5 id="app-vue文件" tabindex="-1"><a class="header-anchor" href="#app-vue文件" aria-hidden="true">#</a> App.vue文件</h5><h5 id="main-js文件" tabindex="-1"><a class="header-anchor" href="#main-js文件" aria-hidden="true">#</a> main.js文件</h5><h4 id="标签顺序保持一致" tabindex="-1"><a class="header-anchor" href="#标签顺序保持一致" aria-hidden="true">#</a> 标签顺序保持一致</h4><p>单文件组件应该总是让标签顺序保持为 正例：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>&lt;template&gt;...&lt;/template&gt;

&lt;script&gt;...&lt;/script&gt;

&lt;style&gt;...&lt;/style&gt;

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>&lt;template&gt;...&lt;/template&gt;

&lt;style&gt;...&lt;/style&gt;

&lt;script&gt;...&lt;/script&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol><li>必须为 v-for 设置键值 key</li><li>v-show 与 v-if 选择 如果运行时，需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if。</li><li>script 标签内部结构顺序name &gt; components &gt; mixins &gt; props &gt; data &gt; computed &gt; watch &gt; filter &gt; 钩子函数（钩子函数按其执行顺序）&gt; methods</li></ol><h4 id="vue-router-规范" tabindex="-1"><a class="header-anchor" href="#vue-router-规范" aria-hidden="true">#</a> Vue Router 规范</h4><ol><li><p>页面跳转数据传递使用路由参数</p><p>页面跳转：</p><p>例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，</p><p>推荐使用 路由参数进行传参，而不是将需要传递的数据保存 vuex，</p><p>然后在 B 页面取出 vuex 的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，</p><p>导致 B 页面无法正常显示数据。</p><p>正例：</p></li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>   <span class="token keyword">let</span> id <span class="token operator">=</span> <span class="token string">&#39; 123&#39;</span><span class="token punctuation">;</span>
   <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;userCenter&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> id <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><ol start="2"><li>使用路由懒加载（延迟加载）机制</li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code> <span class="token punctuation">{</span>
   <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/uploadAttachment&#39;</span><span class="token punctuation">,</span>
   <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;uploadAttachment&#39;</span><span class="token punctuation">,</span>
   <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
     <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;上传附件&#39;</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/view/components/uploadAttachment/index.vue&#39;</span><span class="token punctuation">)</span>
 <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li><p>router 中的命名规范 path、childrenPoints 命名规范采用 kebab-case 命名规范</p><ul><li>尽量 vue 文件的目录结构保持一致，因为目录、文件名都是 kebab-case，这样很方便找到对应的文件</li></ul><p>name 命名规范采用 kebab-case 命名规范且和 component 组件名保持一致！</p><ul><li>因为要保持keep-alive 特性，keep-alive 按照 component 的 name 进行缓存，所以两者必须高度保持一致</li></ul></li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 动态加载</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> reload <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
   <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/reload&#39;</span><span class="token punctuation">,</span>
   <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;reload&#39;</span><span class="token punctuation">,</span>
   <span class="token literal-property property">component</span><span class="token operator">:</span> Main<span class="token punctuation">,</span>
   <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
       <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;动态加载&#39;</span><span class="token punctuation">,</span>
       <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">&#39;icon iconfont&#39;</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
       <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/reload/smart-reload-list&#39;</span><span class="token punctuation">,</span>
       <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;SmartReloadList&#39;</span><span class="token punctuation">,</span>
       <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
           <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;SmartReload&#39;</span><span class="token punctuation">,</span>
           <span class="token literal-property property">childrenPoints</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span><span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;查询&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;smart-reload-search&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span><span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;执行 reload&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;smart-reload-update&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span><span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;查看执行结果&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;smart-reload-result&#39;</span><span class="token punctuation">}</span>
           <span class="token punctuation">]</span>
       <span class="token punctuation">}</span><span class="token punctuation">,</span>
       <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token operator">&gt;</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/views/reload/smart-reload/smart-reload-list.vue&#39;</span><span class="token punctuation">)</span>
   <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="4"><li><p>router 中的 path 命名规范</p><p>path 除了采用 kebab-case 命名规范以外，必须以 / 开头，即使是 children 里的 path 也要以 / 开头。</p><p>目的：</p><p>经常有这样的场景：某个页面有问题，要立刻找到这个 vue 文件，如果不用以/开头，path 为 parent和 children 组成的，可能经常需要在 router 文件里搜索多次才能找到，而如果以/开头，则能立刻搜索到对应的组件。</p></li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
   <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/file&#39;</span><span class="token punctuation">,</span>
   <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;File&#39;</span><span class="token punctuation">,</span>
   <span class="token literal-property property">component</span><span class="token operator">:</span> Main<span class="token punctuation">,</span>
   <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
       <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;文件服务&#39;</span><span class="token punctuation">,</span>
       <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">&#39;ios-cloud-upload&#39;</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
       <span class="token punctuation">{</span>
           <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/file/file-list&#39;</span><span class="token punctuation">,</span>
           <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;FileList&#39;</span><span class="token punctuation">,</span>
           <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token operator">&gt;</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/views/file/file-list.vue&#39;</span><span class="token punctuation">)</span>
       <span class="token punctuation">}</span><span class="token punctuation">,</span>
       <span class="token punctuation">{</span>
           <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/file/file-add&#39;</span><span class="token punctuation">,</span>
           <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;FileAdd&#39;</span><span class="token punctuation">,</span>
           <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token operator">&gt;</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/views/file/file-add.vue&#39;</span><span class="token punctuation">)</span>
       <span class="token punctuation">}</span><span class="token punctuation">,</span>
       <span class="token punctuation">{</span>
           <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/file/file-update&#39;</span><span class="token punctuation">,</span>
           <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;FileUpdate&#39;</span><span class="token punctuation">,</span>
           <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token operator">&gt;</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/views/file/file-update.vue&#39;</span><span class="token punctuation">)</span>
       <span class="token punctuation">}</span>
   <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vue-项目目录规范" tabindex="-1"><a class="header-anchor" href="#vue-项目目录规范" aria-hidden="true">#</a> Vue 项目目录规范</h3><h4 id="基础" tabindex="-1"><a class="header-anchor" href="#基础" aria-hidden="true">#</a> 基础</h4><p>vue 项目中的所有命名一定要与后端命名统一。</p><p>比如权限：后端 privilege, 前端无论 router , store, api 等都必须使用 privielege 单词！</p><h4 id="使用-vue-cli-脚手架" tabindex="-1"><a class="header-anchor" href="#使用-vue-cli-脚手架" aria-hidden="true">#</a> 使用 Vue-cli 脚手架</h4><p>使用 vue-cli3 来初始化项目，项目名按照上面的命名规范。</p><h4 id="目录说明" tabindex="-1"><a class="header-anchor" href="#目录说明" aria-hidden="true">#</a> 目录说明</h4><p>目录名按照上面的命名规范，其中 components 组件用大写驼峰，其余除 components 组件目录外的所有目录均使用 kebab-case 命名。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>   src 源码目录
   |-- api 所有 api 接口
   |-- assets 静态资源，images, icons, styles 等
   |-- components 公用组件
   |-- config 配置信息
   |-- constants 常量信息，项目所有 Enum, 全局常量等
   |-- directives 自定义指令
   |-- filters 过滤器，全局工具
   |-- datas 模拟数据，临时存放
   |-- lib 外部引用的插件存放及修改文件
   |-- mock 模拟接口，临时存放
   |-- plugins 插件，全局使用
   |-- router 路由，统一管理
   |-- store vuex, 统一管理
   |-- themes 自定义样式主题
   |-- views 视图目录
   | |-- role role 模块名
   | |-- |-- role-list.vue role 列表页面
   | |-- |-- role-add.vue role 新建页面
   | |-- |-- role-update.vue role 更新页面
   | |-- |-- index.less role 模块样式
   | |-- |-- components role 模块通用组件文件夹
   | |-- employee employee 模块
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="5"><li><p>api 目录</p><p>文件、变量命名要与后端保持一致。</p><p>此目录对应后端 API 接口，按照后端一个 controller 一个 api.js 文件。若项目较大时，可以按照业务划分子目录，并与后端保持一致。</p><p>api 中的方法名字要与后端 api url 尽量保持语义高度一致性。</p><p>对于 api 中的每个方法要添加注释，注释与后端 swagger 文档保持一致。</p></li><li><p>assets 目录</p><p>assets 为静态资源，里面存放 images, styles, icons 等静态资源，静态资源命名格式为 kebab-case</p></li></ol><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>   |assets
   |-- icons
   |-- images
   | |-- background-color.png
   | |-- upload-header.png
   |-- styles
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="7"><li>components 目录</li></ol><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>   此目录应按照组件进行目录划分，目录命名为 kebab-case，组件命名规则也为 kebab-case
   |components
   |-- error-log
   | |-- index.vue
   | |-- index.less
   |-- markdown-editor
   | |-- index.vue
   | |-- index.js
   |-- kebab-case
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="8"><li><p>constants 目录</p><p>此 目 录 存 放 项 目 所 有 常 量 ， 如 果 常 量 在 vue 中 使 用 ， 请 使 用 vue-enum 插 件(https://www.npmjs.com/package/vue-enum)</p><p>目录结构：</p></li></ol><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>   |constants
   |-- index.js
   |-- role.js
   |-- employee.js
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>例子： employee.js</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>export const EMPLOYEE_STATUS = {
   NORMAL: {
       value: 1,
       desc: &#39;正常&#39;
   },
   DISABLED: {
       value: 1,
       desc: &#39;禁用&#39;
   },
   DELETED: {
       value: 2,
       desc: &#39;已删除&#39;
   }
};
export const EMPLOYEE_ACCOUNT_TYPE = {
   QQ: {value: 1, desc: &#39;QQ 登录&#39; },
   WECHAT: {value: 2, desc: &#39;微信登录&#39; },
   DINGDING: {value: 3, desc: &#39;钉钉登录&#39; },
   USERNAME: {value: 4, desc: &#39;用户名密码登录&#39; }
};
export default {
   EMPLOYEE_STATUS,
   EMPLOYEE_ACCOUNT_TYPE
};

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="9"><li><p>router 与 store 目录</p><p>这两个目录一定要将业务进行拆分，不能放到一个 js 文件里。</p><p>router 尽量按照 views 中的结构保持一致</p><p>store 按照业务进行拆分不同的 js 文件</p></li></ol></div><!--[--><!--]--></div><footer class="page-meta"><!----><!----><!----></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/preview/dev-edge/frontend/others/note.html" class="" aria-label="前端知识点"><!--[--><!--]--> 前端知识点 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/preview/dev-edge/assets/app-5517e208.js" defer></script>
  </body>
</html>
